<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工程进度上报</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../resources/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../resources/css/style.css" media="all">
    <style>
        /*.layui-form-pane .layui-input-block{margin-left: 82px;}*/
        .saixuan:after{width: 0;}
        .layui-form-pane .layui-input-block{margin-left: 0;}


        .layui-form-item .layui-input-inline{width: 165px;}
        .masksx .forms{padding-left: 0;text-align: center;}
        .masksx{width: 650px;}
        .mask input{width: 100%!important;}
        .mask .layui-select-title{width: 480px;}
        .layui-inline{margin-bottom: 10px;}
        .layui-upload{ text-align: left;}
        #demo2 img{width: 120px; height: 120px;}
        .imgs{position: relative;width: 120px; height: 120px; float: left;}
        ._ingshan{position: absolute;right: 0px;top: 0px;border: 1px solid #E3e3e3;
            border-radius: 50%;width: 20px;height: 20px;text-align: center;}
        @media only screen and (min-width: 321px) and (max-width: 1024px) {
            .layui-form-pane .layui-form-label{width: 108px;}
            .layui-input-inline{width: 100%;}
            .mask .layui-input-inline{width:auto;}
            .layui-form-item .layui-input-inline{width: 100%;}
        }
        .chakan{display: none;}
        .chakan input{width: 83%!important;}
        .dynamic li:before{content: "";}
        .dynamic{text-align: left;}
        .dynamic li{text-align: center; height: 30px;line-height: 30px;}
        .GLeft{width: 100px;display: inline-block;text-align: right; padding-right: 10px;}
        .masksx{height: 50%;text-align: center;}
        .GLeft,.GRight{width: 45%;display: inline-block;}
        .GRight{text-align: left;width: 45%;}
        .zeng input{width: 40%!important;display: inline-block;}
        .zeng{position: relative; margin-bottom:10px; }
        .zengjia{position: absolute;left: 15px;top: 5px;}
        .shanchu{position: absolute;right: 15px; top: 5px;}
        .neirong{display: none;}
        .neirong input{width: 30%!important;display: inline-block;}
        .layui-form-item .layui-input-inline{width: 100%;}
        .layui-form-item{clear:none;}
        .layui-input-inline{width: 80%!important;}
        li:before{content:'';}
        .layui-tab-title .layui-this{color: #fff;background-color: #009688;}
        .layui-form{height: auto!important;}
        .layui-form-select dl{height: 150px;}
        .layui-disabled, .layui-disabled:hover{color: #333!important;}
        .neirongon{margin-top: 5px;}
    </style>
</head>
<body>

<form class="layui-form layui-form-pane" id="form_7grid" action="" >
    <div class="formTop layui-row">
        <div class="layui-form-item layui-col-lg2 layui-col-sm2 layui-col-xs2">
            <div class="layui-input-inline">
                <input type="text" name="cc_code"  placeholder="项目名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-col-lg2 layui-col-sm2 layui-col-xs2 dongXian">
            <div class="layui-input-inline">
                <input type="text" name="sbr"  placeholder="申请人" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline layui-col-lg2 layui-col-sm2 layui-col-xs2">
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test-limit3" placeholder="请选择上报开始日期">
            </div>
        </div>
        <div class="layui-inline layui-col-lg2 layui-col-sm2 layui-col-xs2">
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test-limit4" placeholder="请选择上报结束日期">
            </div>
        </div>

        <div class="layui-col-lg3 layui-col-md3 layui-col-xs3 dongTai">
            <button class="layui-btn" type="button" onclick="query()">查询
            </button>
            <button class="layui-btn shenqingvisa quanxian" type="button"  style="background-color:
            #FE913F; margin-left: 30px;" QX="api/process/builPrecessBao.do">申报施工进度</button>
        </div>
    </div>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this mingxi">明细</li>
            <li class="huizhong">汇总</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show"> <table id="demo" lay-filter="test1">
                <a class="dayin" type="button" id="dlink"  style="float: right; position: fixed; right: 50px; bottom: 50px; z-index: 999;"></a>
            </table>
            </div>
            <div class="layui-tab-item">
                <table id="demo1" lay-filter="test"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-sm layui-btn-danger chakans" lay-event="bianji">编辑</a>
    </script>


    <div class="mask">
        <div class="masksx">
            <div class="title"><span class="titleL">申报施工进度</span><span class="close">×</span></div>
            <div class="forms shenqing">
                <form class="layui-form addUser" method="post" action="">
                    <div class="layui-inline houbu">
                        <label class="layui-form-label">项目名称:</label>
                        <div class="layui-input-inline">
                            <select name="bt_id" lay-verify="required" lay-search="" lay-filter="filter">
                                <option value="">直接选择或搜索选择</option>
                                <!--<option value="1">1</option>-->

                            </select>
                            <input type="hidden" name="compCode1" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">

                        </div>
                    </div>
                    <table class="layui-table dongtab">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>内容</th>
                                <th>计量单位</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--<tr>-->
                                <!--<td></td>-->
                                <!--<td></td>-->
                                <!--<td></td>-->
                            <!--</tr>-->
                        </tbody>
                    </table>
                    <div class="neirong">
                        <!--<input type="text" name="compCode1" disabled="disabled" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">-->
                        <!--<input type="number" name="compCode1" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">-->
                        <!--<input type="text" name="compCode1" disabled="disabled" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">-->
                    </div>
                    <div class="_submit">
                        <button class="layui-btn layui-btn-sm tijiao" lay-submit lay-filter="_subm">提交</button>
                    </div>
                </form>
            </div>
            <div class="forms chakan">
                <form class="layui-form addUser" method="post" action="">
                    <ul class="dynamic">
                        <li>
                            <p><span class="GLeft">合同编号:</span><span class="GRight cc_Code">CCD551</span></p>
                        </li>
                        <li>
                            <p><span class="GLeft">项目名称:</span><span class="GRight eppName"></span></p>
                        </li>
                        <li>
                            <p><span class="GLeft">上报时间:</span><span class="GRight createTime"></span></p>
                        </li>
                        <li>
                            <p><span class="GLeft">施工单位:</span><span class="GRight compName1"></span></p>
                        </li>

                    </ul>
                </form>
            </div>
        </div>
    </div>




</form>

<script src="../../../resources/layui/layui.js" charset="utf-8"></script>
<script src="../../../resources/js/style.js"></script>
<script src="../../../resources/js/api.js"></script>

<script>
    //查询按钮 功能封装
    function query() {
        layui.use(['form', 'layedit', 'laydate','table','element','upload'], function() {
            var form = layui.form
                , table = layui.table
                ,upload = layui.upload;
            var pronName=$("[name='cc_code']").val();      //获取查询值
            var begintime=$('#test-limit3').val();          //获取查询开始时间
            var endtime=$('#test-limit4').val();            //获取查询结束时间
            var state=$('[name="state"]').val();         //获取状态值
            var sbr=$('[name="sbr"]').val();

            $('#form_7grid').attr('action',urls+'/api/process/builProcessList.do')
            if(!AntiSqlValid(pronName)){           //判断是否包含特殊符号
                if(lbq('api/process/buildProcessNew.do')) {

                    API.progress({
                        'type': 'a',
                        'bengintime': begintime,
                        'endtime': endtime,
                        'state': state,
                        'proName': pronName,
                        'sbr': sbr,
                        'p': getCookie('yanzheng')
                    })
                    API.progress1({
                        'type': 'd',
                        'bengintime': begintime,
                        'endtime': endtime,
                        'proName': pronName,
                        'sbr': sbr,
                        'p': getCookie('yanzheng')
                    });
                }

            }else {
                layer.msg('请勿输入特殊符号');
            };
        })


    }

    layui.use(['form', 'layedit', 'laydate','table','element','upload'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,table=layui.table
            ,element=layui.element
            ,upload = layui.upload;

        var canshu=new Object();
        dayintishi('.dayin');
        jiazais();

        ajaxs('/api/public/loadPriDropDown.do','post',{'type':'d','p':getCookie('yanzheng')},function (data) {
            //console.log(data)
            var datas=data.data;
            for(var i=0;i<datas.length;i++){

                $('[name="bt_id"]').append('<option value="'+datas[i].cc_UUID+'">'+datas[i].proName+'</option>')
                canshu[datas[i].cc_UUID]={'names':datas[i].eppStaEnd}
            }
            form.render();
        });
        if(lbq('api/process/buildProcessNew.do')){
            API.progress({'type':'a','p':getCookie('yanzheng')});

            API.progress1({'type':'d','p':getCookie('yanzheng')});
        }

        var _picurls=new Array();

        $('.huizhong').click(function () {
            $('.dongXian').hide();
        });
        $('.mingxi').click(function () {
            $('.dongXian').show();
        });
        var ids;
        var c_Cuid;
        //监听工具条
        table.on('tool(test1)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'detail') { //详情        未使用到
//                console.log(obj)


            } else if(layEvent === 'bianji') { //编辑
                console.log(obj)
                var da=obj.data;
                c_Cuid='';
                ids='';
                c_Cuid=da.cc_UUID;
                $('.mask').show();
                $('.titleL').html('编辑施工进度上报');
                $('.tijiao').attr('lay-filter','_subm2');           //切换提交按钮的自定义属性  用以动态更换提交事件
                $('[name="bt_id"]').val(da.cc_UUID).attr('disabled','disabled');    //给input赋值  并禁止修改
                $('.dongtab tbody').html('');                   //清空页面内dongtab tbody表格的结构
                ids = da.bt_id;
                Btnoff('.tijiao');
                ajaxs('/api/process/buildProcessNew.do','post',{'type':'c','remark':da.cc_UUID,'p':getCookie('yanzheng')},function (data) {
                    $('.neirong').html('').show();

                    var d=data.data;
                    console.log(d);
                    var arrs=[];            //创建一个新数组
                    for (var i = 0; i < d.length; i++) {
                        $('.dongtab tbody').append('<tr>' +
                            '                                <td>' + d[i].cc_key + '</td>' +
                            '                                <td>' + d[i].cc_value + '</td>' +
                            '                                <td>' + d[i].cc_bit + '</td>' +
                            '                            </tr>');
                        arrs.push(d[i].cc_value);

                    }
                    for(var i=0;i<da.details.length;i++){
                        console.log(parseFloat(arrs[i].cc_value))

                        $('.neirong').append('<div class="neirongon" ids="' + da.details[i].id + '" panduan="'+parseFloat(arrs[i]) +'"> <input type="text" name="names" disabled="disabled" lay-verify="title" autocomplete="off" placeholder="请输入"    class="layui-input" value="' + da.details[i].bt_Name + '" class="names">' +
                            '                        <input type="number" name="Num" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input" value="'+parseFloat(da.details[i].bt_Value)+'" class="Num">' +
                            '                        <input type="text" name="danwei" disabled="disabled" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input" value="' + da.details[i].bt_bit + '" class="danwei"></div>');
                    }

                    form.render();
                    $('.layui-disabled').attr('disabled', 'disabled');
                })
            }
        });

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';        //代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
        });
        var time;
            $(document).on('keyup','[type="number"]',function () {
                clearTimeout(time);
                var root = this;
                // 小华更改,128 编辑企业--提交按钮被禁用
                time = setTimeout(function () {
                    var _names=$(root).val();               //获取页面值
                    _names=$.trim(_names);
                    if(_names<0){
                        layer.msg('数量不能小于0');
                        $(root).val(0);
                        Btnon('.tijiao')
                    }else{
                        Btnoff('.tijiao')
                    }
                }, 500)
            });

        var ccuid='';
        form.on('select(filter)', function(data){
            //console.log(data.elem); //得到select原始DOM对象
            //console.log(data.value); //得到被选中的值
            //console.log(data.othis); //得到美化后的DOM对象
            ccuid=data.value;           //存储被选中的值,用以发送ajax(未使用)
            Btnoff('.tijiao');
            $('.dongtab tbody').html('');
            $('.neirong').html('');
            $('.neirong').show();

            ajaxs('/api/process/buildProcessNew.do','post',{'type':'c','remark':data.value,'p':getCookie('yanzheng')},function (data) {
                //console.log(data)
                var datas=data.data;
                $.each(datas,function (k,v) {
                    $('.dongtab tbody').append('<tr>' +
                        '                                <td>'+v.cc_key+'</td>' +
                        '                                <td>'+v.cc_value+'</td>' +
                        '                                <td>'+v.cc_bit+'</td>' +
                        '                            </tr>');
                    $('.neirong').append('<div class="neirongon"> <input type="text" name="names" disabled="disabled" lay-verify="title" autocomplete="off" placeholder="请输入"    class="layui-input" value="'+v.cc_key+'" class="names">' +
                        '                        <input type="number" name="Num" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input" value="0" class="Num" panduan="'+v.cc_value+'">' +
                        '                        <input type="text" name="danwei" disabled="disabled" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input" value="'+v.cc_bit+'" class="danwei"></div>');
                })
            })

            
        });
        //点击增加按钮时，在页面内部执行添加代码
        $(document).on('click','.zengjia',function () {
            var _htmls=$(this).parent().html();
            //console.log(_htmls)
            $(this).parent().before('<div class="zeng">'+_htmls+'</div>');
        });

        //点击删除按钮时   删除渲染行的dom结构
        $(document).on('click','.shanchu',function () {
            var _htmls=$(this).parent();
            _htmls.remove();
        });

        //前后若干天可选，这里设置不能选过去的日期      最远可选1000天之后
        panduanshijiantow('#test-limit3','#test-limit4',1000,1000,'.layui-btn-normal');     //查询 开始结束时间判断

        $('.shenqingvisa').click(function () {
            $('.mask').show();
            $('.shenqing').show();
            $('.chakan').hide();
            $('.titleL').html('申报施工进度');
            $('[name="bt_id"]').val('').attr('disabled',false);
            $('.dongtab tbody').html('');
            $('.tijiao').attr('lay-filter','_subm');
            $('.neirong').html('');
            Btnon('.tijiao');
            form.render();
        });

        $('.close').click(function () {     //遮罩层隐藏
            $('.mask').hide();
        })
        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
                //console.log(obj)

            }else if( layEvent==='toExamine'){      //编辑
                $('.titleL').html('查看详情');
                //console.log(obj)
                $('.cc_Code').html(obj.data.cc_Code);
                $('.eppName').html(obj.data.eppName+'&nbsp;&nbsp;&nbsp;'+obj.data.eppStaEnd);
                $('.createTime').html(obj.data.createTime);
                $('.compName1').html(obj.data.compName1);
                for(var key in obj.data){               //for in 循环对象获取键值
                    var str = /[\u4e00-\u9fa5]/;          //正则 匹配汉字
                    if(str.test(key)){                     //如果键是汉字  动态添加元素
                        $('.dynamic').append(' <li>' +
                            '                            <p><span class="GLeft">'+key+'</span><span class="GRight compName1">'+obj.data[key]+'</span></p>' +
                            '                        </li>');

                    };

                };

                $('.chakan').show();
                $('.shenqing').hide();
                $('.mask').show();

            };
        });


        $(document).on('click','._ingshan',function () {
            //console.log($(this).prev().attr('src'))
            var shanSRC=$(this).prev().attr('src');
            $(this).parent().remove();
            $.each(_picurls,function(index,item){       //删除功能
                // index是索引值（即下标）   item是每次遍历得到的值；
                if(item==shanSRC){
                    _picurls.splice(index,1);
                };

            });

            //console.log(_picurls)
        });
        //点击提交按钮时执行的代码
        form.on('submit(_subm)',function (data) {
            //console.log(data.field)
            var cailiao='';
            $.each($('.neirongon'),function (k,v) {             //循环所有的neirongon判断页面内部的input是否小于0或者大于总概况的数量
                var names=$(v).children().eq(0).val();
                var Num=$(v).children('[name="Num"]').val();
                var danweis=$(v).children().eq(2).val();
                var duibi=parseInt($(v).children().eq(1).attr('panduan'));
                //判断  如果数量小于0就说明页面信息填写错误  该参数数量不能小于0
                if(Num<0){
                    layer.msg('数量不能小于0');
                    $(v).children('[name="Num"]').val(0);           //该参数重置为0
                    return;                 //终止程序运行
                };
                //判断  如果num大于duibi说明页面信息填写错误，当前参数不能大于总概况内的数字
                if(Num>duibi){
                    layer.msg('内容不能大于总概况');
                    $(v).children('[name="Num"]').val(0);           //该参数重置为0
                    return;                 //终止程序运行
                };
                cailiao+=(names+','+Num+','+danweis+'|');           //要提交数据拼串处理
            })
            cailiao=cailiao.substring(0,cailiao.length-1);
            //console.log(cailiao)
            data.field.cc_uuid=ccuid;
            data.field.str=cailiao;
            data.field.p=getCookie('yanzheng');
            formAlertAjax('/api/process/builPrecessBao.do',data.field,'.tijiao');
            return false;

        });
        //监听提交    下列代码同上   只是提交地址不同  参数有个别更改
        form.on('submit(_subm2)',function (data) {
            console.log(data.field);
            var cailiao='';
            var ti=true;
            $.each($('.neirongon'),function (k,v) {
                var id=$(v).attr('ids');
                var names=$(v).children().eq(0).val();
                var Num=$(v).children('[name="Num"]').val();
                var danweis=$(v).children().eq(2).val();
                var duibi=parseFloat($(v).attr('panduan'));
                if(Num<0){
                    layer.msg('数量不能小于0');
                    $(v).children('[name="Num"]').val(0);
                    return;
                };
                if(Num>duibi){
                    layer.msg('内容不能大于总概况');
                    $('[name="Num"]').eq(k).val(0);
                    ti=false;
                    return false;
                };
                cailiao+=(id+','+names+','+Num+','+danweis+'|');
            });
            cailiao=cailiao.substring(0,cailiao.length-1);
            data.field.cc_uuid=c_Cuid;
            data.field.bt_id=ids;
            data.field.str=cailiao;
            data.field.p=getCookie('yanzheng');
            if(ti){
                formAlertAjax('/api/process/buildProceEdit.do',data.field,'.tijiao');
            }
            return false;           //终止页面form表单跳转

        })          //监听提交


    })

</script>
</body>
</html>